import { View, ViewProps } from "@tarojs/components";
import RadioText from "@/components/RadioText";
import { UnitOptions, SetsTypeOptions } from "@/utils/options";
import { getOptionTxt } from "@/utils";
import "./index.less";
import { usePopup } from "@/store/popup";
import Taro from "@tarojs/taro";

type Props = {
  motion: {
    sets: number[][];
    unit: number;
    setsType: number;
    recordWay: number;
    [key: string]: any;
  };
  onChange: (key: string, value?: any, index?: number) => void;
} & ViewProps;

const UnitDisplay = ({ value, unit, ...others }) => {
  return (
    <View
      className="unit-display"
      {...others}
      hover-class="unit-display-active"
    >
      <View className="unit-display-left ">{value}</View>
      <View className="unit-display-right">{unit}</View>
    </View>
  );
};

const MotionSets = ({ motion, onChange, className = "", ...others }: Props) => {
  const { openPopup } = usePopup();

  if (motion.recordWay === 1) return null;

  const weightUnitStr = getOptionTxt(motion.unit, UnitOptions);
  const typeUnitStr = getOptionTxt(motion.setsType, SetsTypeOptions);

  return (
    <View className={`sets-container ${className}`} {...others}>
      <View className="sets-row">
        <View className="sets-row-header-cell">
          <RadioText
            key="unit"
            value={motion.unit}
            options={UnitOptions}
            onChange={onChange.bind(null, "unit")}
          />
        </View>
        <View className="sets-row-header-cell">
          <RadioText
            key="setsType"
            value={motion.setsType}
            options={SetsTypeOptions}
            onChange={onChange.bind(null, "setsType")}
          />
        </View>
        <View
          className="sets-row-header-cell"
          style={{ width: Taro.pxTransform(120) }}
        ></View>
      </View>
      {motion.sets.map((set, index) => {
        const [weight, count] = set;
        const numStr = `第${index + 1}组`;
        return (
          <View className="sets-row">
            <View className="sets-row-cell">{numStr}</View>
            <View className="sets-row-cell">
              <UnitDisplay
                value={weight}
                unit={weightUnitStr}
                onClick={() =>
                  openPopup({
                    round: false,
                    type: "number",
                    showConfirm: false,
                    props: {
                      label: `${numStr}-重量(${weightUnitStr})`,
                      initValue: String(weight),
                    },
                    onConfirm: (v) => {
                      onChange("sets", [Number(v), count], index);
                    },
                  })
                }
              />
            </View>
            <View className="sets-row-cell">
              <UnitDisplay
                value={count}
                unit={typeUnitStr}
                onClick={() =>
                  openPopup({
                    round: false,
                    type: "number",
                    showConfirm: false,
                    props: {
                      label: `${numStr}-度量(${typeUnitStr})`,
                      initValue: String(weight),
                    },
                    onConfirm: (v) => {
                      onChange("sets", [weight, Number(v)], index);
                    },
                  })
                }
              />
            </View>
            <View
              className="flex-end set-actions"
              style={{ width: Taro.pxTransform(120), fontSize: "20px" }}
            >
              {index !== 0 && (
                <View
                  className="delete"
                  onClick={() => onChange("delSet", null, index)}
                >
                  -
                </View>
              )}
              <View
                className="plus"
                onClick={() => onChange("addSet", null, index)}
              >
                +
              </View>
            </View>
          </View>
        );
      })}
      {/* 
      <View
        className="sets-row"
        style={{
          paddingTop: "2px",
        }}
      >
        <RestSetting
          className={`flex-start`}
          open={motion.openInner}
          name="innerRest"
          value={motion.innerRest}
          label="组间休息"
          onChange={handleMotion}
        />
        <RestSetting
          className={`flex-start`}
          open={motion.openOuter}
          name="outerRest"
          value={motion.outerRest}
          label="完成后休息"
          onChange={handleMotion}
        />
      </View> */}
    </View>
  );
};

export default MotionSets;
